<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <meta name="_token" content="{{csrf_token()}}">
    <script src="{{URL::asset('js/jquery.min.js')}}"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
        });
    </script>
</head>
<body>
    <center>
        @include('shop.menu')
        <table border="1" width="860px">
            <tr>
                <th>订单号</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>购买数量</th>
                <th>总价</th>
                <th>操作</th>
            </tr>
            @foreach($list as $v)
                <tr align="center">
                    <td>{{$v->id}}</td>
                    <td>{{$v->gname}}</td>
                    <td>{{$v->gprice}}</td>
                    <td>
                        <input type="number" id="num_{{$v->id}}" value="{{$v->order_num}}" min="1" onclick="numbers('{{$v->id}}','{{$v->gname}}','{{$v->gprice}}')">
                    </td>
                    <td xx="{{$v->id}}" class="total_prices" id="total_{{$v->id}}">{{$v->total_prices}}</td>
                    <td>
                        <a href="{{url('shop')}}/{{$v->id}}/edit">删除</a>
                    </td>
                </tr>
            @endforeach
        </table>
        <br><br>
        <div>
            <p>总价：<span id="total" style="color: red;font-size: 40px;"></span></p>
            <p>输入金额：<input type="number" id="money" value="" min="0"></p>
            <br><br>
            <button onclick="account()"><span style="font-size: 30px;">结算</span></button>
        </div>
    </center>
    <script>
        var len = $(".total_prices").length;
        var sum = 0;
        var str_id = "";
        for(var i=0;i<len;i++){
            var value = $(".total_prices")[i].innerHTML;
            str_id += $(".total_prices")[i].getAttribute('xx')+",";
            sum = sum + eval(value);
        }
        sum = sum.toFixed(2);
        $("#total").html(sum);
        function numbers(id,gname,gprice) {
            var nums = $("#num_"+id).val();
            var total_money = nums * gprice;
            total_money = total_money.toFixed(2);
            $("#total_"+id).html(total_money);
            $.ajax({
                url:"{{url('shop')}}",
                type:"post",
                data:{id:id,gname:gname,nums:nums,total_money:total_money},
                dataType:"json",
                success:function (data) {
                    if(data.res==1){
                        //下面总价的计算
                        var len = $(".total_prices").length;
                        sum = 0;
                        for(var i=0;i<len;i++){
                            var value = $(".total_prices")[i].innerHTML;
                            sum = sum + eval(value);
                        }
                        sum = sum.toFixed(2);
                        $("#total_"+id).html(total_money);
                        $("#total").html(sum);
                    }else{
                        alert('有误！')
                    }

                }
            });

        }
        function account() {
            var money = $("#money").val();
            if(eval(money)<sum || money==""){
                alert("余额不足！")
            }else{
                $.ajax({
                    url:"{{url('shop')}}/"+str_id,
                    type:"PUT",
                    dataType:"json",
                    success:function (data) {
                        if(!data.res){
                            alert(data.msg);
                        }else{
                            var str = "本次一共消费了"+sum+"元\n找零："+(money-sum).toFixed(2);
                            alert(str);
                            window.location.reload();
                        }

                    }
                });

            }
        }
    </script>
</body>
</html>